<template>
	<div class="course">
		<header>
			<webHader :title="t('courseDetail.title')" :crumbs="crumbs" :backgroundImageUrl="headerBg" />
		</header>
		<div>
			<div class="content" v-loading="loading">
				<div class="course-content">
					<div class="course-detail">
						<div class="left">
							<div class="title">
								{{ pageInfo.courseName ?? '--' }}
							</div>
							<div class="introduce-list">
								<div>
									<span>{{ t('courseDetail.applicableAge') }}：</span>
									<span>
										{{
											$t('courseDetail.ageUnit', {
												age: pageInfo.applicableAge || 0,
											})
										}}</span>
								</div>
								<div>
									<span>{{ t('courseDetail.numberAttendees') }}：</span>
									<span>
										{{
											$t('courseDetail.numberUnit', {
												count: pageInfo.coursePackageType == 0 ? pageInfo.numberAttendees ?? 0 :
													`${pageInfo.minNumberAttendees ?? 0}-${pageInfo.maxNumberAttendees ?? 0
													}`,
											})
										}}</span>
								</div>
								<div>
									<span>{{ t('courseDetail.courseStartDate') }}：</span>
									<span>
										{{
											formatDateArea(
												pageInfo.courseStartDate ?? Date.now(),
												pageInfo.courseEndDate ?? Date.now()
											)
										}}
									</span>
								</div>
								<div>
									<span>{{ t('courseDetail.classCount') }}：</span>
									<span>
										{{ t('courseDetail.classHourUnit', {
											section: pageInfo.customCourseTime?.courseNumber ?? 0,
											hours: pageInfo.customCourseTime?.timeEachClass ?? 0
										}) }}
									</span>
								</div>
								<div>
									<span>{{ t('courseDetail.location') }}：</span>
									<span>
										{{ pageInfo.venueName ?? '--' }}
									</span>
								</div>
								<div v-if="pageInfo.courseConfigRespVO?.coursePriceDisplay === 1">
									<span>{{ t('courseDetail.price') }}：</span>
									<span>
										{{ t('courseDetail.priceWithCurrency', { price: pageInfo.customCourseTime?.price ?? 0 }) }}
									</span>
								</div>
							</div>
							<div class="course-type">
								<span class="">{{ courseTypeText }}</span>
							</div>
							<!-- <div class="appraise">
                <el-rate
                  v-model="rateVal"
                  disabled
                  show-score
                  text-color="#FED03A"
                  score-template="{value}"
                />
              </div> -->
							<div class="actionButtons">
								<el-button v-if="pageInfo?.courseConfigRespVO?.purchaseMethod" @click="handleGoOrder" type="primary"
									:loading="teacherLoading" :disabled="teacherLoading" class="actionButtons-button active">
									<template #icon>
										<svg-icon name="cart" class="svg-style"></svg-icon>
									</template>
									{{ t('courseDetail.buyNow') }}
								</el-button>
								<el-button @click="handleShowTeacherDialog" type="primary" :loading="teacherLoading"
									class="actionButtons-button active">
									<template #icon>
										<svg-icon name="teacher" class="svg-style"></svg-icon>
									</template>
									{{ t('courseDetail.contactTeacher') }}
								</el-button>

								<!-- <el-button
                  @click="handleShowTeacherDialog"
                  type="primary"
                 :loading="teacherLoading"
                  :disabled="teacherLoading"
                  class="actionButtons-button active"
                >
                  <template #icon>
                    <svg-icon name="comment" class="svg-style"></svg-icon>
                  </template>
                  留言咨询
                </el-button> -->
							</div>
						</div>
						<div class="right">
							<img v-if="
								pageInfo.promotionalImages &&
								pageInfo.promotionalImages.length > 0
							" :src="pageInfo.promotionalImages[0]" alt="" />
						</div>
					</div>
					<div class="course-race-tabs">
						<el-tabs v-model="activeName" class="race-tabs">
							<el-tab-pane :label="t('courseDetail.introTab')" name="1">
								<div v-html="pageInfo.courseDetails"></div>
							</el-tab-pane>
							<!-- <el-tab-pane label="留言咨询" name="2">
                <stayMessage />
              </el-tab-pane>
              <el-tab-pane label="课程评价" name="3">
                <appraise />
              </el-tab-pane> -->
						</el-tabs>
					</div>
				</div>
			</div>
		</div>
	</div>

	<el-dialog v-model="showTeacherDialog" width="500px" :show-close="false" center align-center>
		<div style="background: #f5f5f5; padding: 20px; border-radius: 8px">
			<div style="font-size: 16px; margin-bottom: 16px">
				{{ t('courseDetail.consultTeacher') }}
			</div>
			<div style="display: flex; align-items: flex-start">
				<div style="
						width: 100px;
						height: 100px;
						border: 1px solid #aaa;
						border-radius: 50%;
						margin-right: 20px;
						background: #fff;
					">
					<img style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
						:src="pageInfo.teacherInfo?.cover" alt="" />
				</div>
				<div>
					<div>{{ t('courseDetail.teacher') }}：{{ pageInfo.teacherInfo?.name }}</div>
					<!-- <div>郵箱：</div> -->
					<div>{{ t('courseDetail.phone') }}：{{ pageInfo.teacherInfo?.contact }}</div>
					<!-- <div>facebook：</div> -->
					<!-- <div>微信：</div> -->
				</div>
			</div>
			<div style="text-align: right; margin-top: 20px">
				<el-button type="primary" @click="showTeacherDialog = false">
					{{ t('courseDetail.close') }}
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
// 配置此页面只在客户端渲染
definePageMeta({
	ssr: false,
});
import headerBg from '~/assets/web/activity-header-bg.png';
// import stayMessage from "./components/stayMessage.vue";
// import appraise from "./components/appraise.vue";
import { GetCourseDetail, GetTeacherInfo, GetCourseSchedule } from '~/apis/web';
import { formatDateArea } from '~/utils/utils';
const { t } = useI18n();
const route = useRoute();
const id = computed(() => route.params.id);
const activeName = ref('1');
const pageInfo = ref({});
const rateVal = ref(5.0); // 评分
const showTeacherDialog = ref(false);
const loading = ref(false);
const teacherLoading = ref(false);
const { $navigate, $isLogin } = useNuxtApp();

const crumbs = computed(() =>
	[t('webBar.home'), t('webBar.courses'), t('courseDetail.detail')].join(',')
);

const { courseTypeLabel } = useCourseLabel();
const courseTypeText = computed(() => courseTypeLabel(pageInfo.value?.courseType));

// const goBuy = () => {
//   const router = useRouter();
//   const localePath = useLocalePath();
//   router.push(localePath(`/web/courses/courseBuy?id=${id.value}`));
// };
const getClassTime = async params => {
	try {
		const res = await GetCourseSchedule({ id: params });
		if (res.code === 0) {
			return res.data;
		}
		return null;
	} catch (err) {
		return null;
	}
};
const getReacherInfo = async params => {
	try {
		const res = await GetTeacherInfo({ id: params.staffId });
		if (res.code === 0) {
			return res.data;
		}
		return null;
	} catch (err) {
		return null;
	}
};
const handleShowTeacherDialog = () => {
	// teacherLoading.value = true;
	showTeacherDialog.value = !showTeacherDialog.value;
};
const handleGoOrder = () => {
	if ($isLogin()) {
		$navigate(`/web/courses/courseBuy?id=${pageInfo.value.id}`);
	} else {
		const route = useRoute();
		$navigate({
			path: '/login',
			query: {
				redirect: encodeURIComponent(route.fullPath),
			},
		});
	}
};
const init = async () => {
	let params = {
		id: id.value,
	};
	loading.value = true;

	try {
		const res = await GetCourseDetail(params);
		if (res.code == 0) {
			let thearInfo = res.data.courseTeacherConsultantRespVOS.filter(item => item.type == 1);
			// 并行执行两个异步操作
			const [customCourseTime, teacherInfo] = await Promise.all([
				getClassTime(res.data.courseConfigRespVO.courseSaleConfigRespVOS[0].saleConfigId),
				getReacherInfo(thearInfo[0]),
			]);

			res.data.customCourseTime = customCourseTime;
			res.data.teacherInfo = teacherInfo;
			pageInfo.value = res.data;
			loading.value = false;
		}
	} catch (err) {
		pageInfo.value = {};
		loading.value = false;
	}
};

onMounted(() => {
	init();
});
</script>

<style>
.course-race-tabs {
	margin: 60px 0;
}

.course-race-tabs .race-tabs .el-tabs__nav-wrap:after {
	content: none !important;
}

.course-race-tabs .race-tabs .el-tabs__item {
	font-family: PingFang HK, PingFang HK;
	font-weight: 500;
	font-size: 16px;
	color: rgba(30, 32, 33, 0.7);
}

.course-race-tabs .race-tabs .el-tabs__item.is-active,
.course .el-tabs__item:hover {
	font-family: PingFang HK, PingFang HK;
	font-weight: 500;
	font-size: 16px;
	color: #1e2021;
}

.course-race-tabs .race-tabs .el-tabs__active-bar {
	background: var(--theme-gradient-bg);
}
</style>

<style lang="less" scoped>
.course {
	width: 100%;

	.content {
		background-color: #ffffff;
		padding: 30px 104px;
		box-sizing: border-box;

		.course-content {
			width: 100%;
			padding: 40px 30px;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: 0 auto;
		}

		.course-detail {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.left {
				flex: 1;
				margin-right: 30px;

				.title {
					font-family: PingFang HK, PingFang HK;
					font-weight: 600;
					font-size: 32px;
					color: #1e2021;
					text-align: left;
				}

				.introduce-list {
					margin-top: 30px;
					padding: 0 0 20px 0;
					box-sizing: border-box;
					font-family: PingFang HK, PingFang HK;
					font-weight: 400;
					font-size: 16px;
					color: #656c7e;
					line-height: 28px;
					text-align: left;
				}

				.course-type {
					width: 100%;

					span {
						padding: 6px 15px;
						background: #2b3339;
						border-radius: 0px 0px 0px 0px;
						font-family: PingFang HK, PingFang HK;
						font-weight: 500;
						font-size: 12px;
						color: #ffffff;
						line-height: 24px;
					}
				}

				.appraise {
					margin-top: 34px;

					:deep(.el-rate__text) {
						font-family: Poppins, Poppins !important;
						font-weight: 600 !important;
						font-size: 16px !important;
						color: #4f4f4f !important;
						text-align: left !important;
					}
				}

				.actionButtons {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					margin-top: 38px;

					.actionButtons-button {
						width: 174px;
						height: 52px;
						border-radius: 0px 0px 0px 0px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: PingFang HK, PingFang HK;
						font-weight: 500;
						font-size: 16px;
						color: #1e2021;
						border: 1px solid #1e2021;
						cursor: pointer;
						margin-right: 16px;

						.svg-style {
							width: 17px;
							height: 17px;
							color: #1e2021; // 将此处的颜色值修改为您想要的颜色
							fill: currentColor; // 确保SVG填充颜色继承自color属性
							stroke: currentColor; // 确保SVG描边颜色继承自color属性
						}
					}

					.active {
						background: var(--theme-gradient-bg);
						box-shadow: 0px 10px 15px 0px rgba(153, 1, 1, 0.2);
						border-radius: 0px 0px 0px 0px;
						color: #ffffff;
						border: none;

						.svg-style {
							width: 17px;
							height: 17px;
							color: #ffffff; // 将此处的颜色值修改为您想要的颜色
							fill: currentColor; // 确保SVG填充颜色继承自color属性
							stroke: currentColor; // 确保SVG描边颜色继承自color属性
						}
					}

					.actionButtons-button:hover {
						background: var(--theme-gradient-bg);
						box-shadow: 0px 10px 15px 0px rgba(153, 1, 1, 0.2);
						border-radius: 0px 0px 0px 0px;
						color: #ffffff;
						border: none;

						.svg-style {
							width: 17px;
							height: 17px;
							color: #ffffff; // 将此处的颜色值修改为您想要的颜色
							fill: currentColor; // 确保SVG填充颜色继承自color属性
							stroke: currentColor; // 确保SVG描边颜色继承自color属性
						}
					}
				}
			}

			.right {
				width: 45%;

				img {
					width: 100%;
					object-fit: cover;
					aspect-ratio: 1 / 0.76;
				}
			}
		}
	}
}
</style>
